import React from 'react';
import {connect} from 'dva';
import withRouter from 'umi/withRouter';
import {Layout} from '../../../components';
import { Tabs,Card,Divider,Table,Row, Col,Button,Modal} from 'antd';
import NavLink from 'umi/navlink';

// import styles from './orderDetail.less';
const {DescriptionList} =Layout
const { Description } = DescriptionList;
const TabPane = Tabs.TabPane;
const confirm = Modal.confirm;

// 提货函
const dataSource = [{
    key: '1',
    number: 'TH1231341232',
    type: '提货',
    license: '沪A12345',
    preNum: '1',
    preWeight: '1.23',
    relNum: '1',
    relWeight: '1.23',
    state: '待确认',
},{
    key: '2',
    number: 'TH1231341232',
    type: '提货',
    license: '沪A12345',
    preNum: '1',
    preWeight: '1.23',
    relNum: '1',
    relWeight: '1.23',
    state: '待确认',
}];
  
// 商品明细
const dataSource1 = [{
    key: '1',
    name: '日照 普卷',
    material: 'Q235B',
    size: '4.5*1800*C',
    steel: '唐钢',
    store: '宝丰库',
    price: '5490.00',
    num: '1.23',
    singleWeight: '2.12',
    sumWeight: '2.12',
    sumPrice: '11638',
},{
    key: '2',
    name: '日照 普卷',
    material: 'Q235B',
    size: '4.5*1800*C',
    steel: '唐钢',
    store: '宝丰库',
    price: '5490.00',
    num: '1.23',
    singleWeight: '2.12',
    sumWeight: '2.12',
    sumPrice: '11638',
}];
  

// 驳回提货函
function refuse() {
    confirm({
      title: '驳回提货函',
      content:'提货函申请由客户委托找钢网代为创建，信息有误？确认要作废提货函？',
      centered:true,
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
}
// 确认提货函
function sure() {
    confirm({
      title: '确认提货函',
      content:'提货函申请由客户委托找钢网代为创建，确认提货申请无误？',
      centered:true,
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
}
// 提货函详情
class ViewDetailModal extends React.Component {
    state = { visible:false }
      // 提货函详情
      dataSource2 = [{
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号'
      }, {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号'
      }];
      columns2 = [{
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      }, {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      }, {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      }]
    componentWillReceiveProps(nextProps){
        const {modalVisible}=nextProps
        if(modalVisible){
            this.setState({
                visible:true
            })
        }else{
            this.setState({
                visible:false
            })
        }
    }
    handleCancel = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
  
    render() {
      return (
        <div>
          <Modal
            centered
            title="提货函详情"
            visible={this.state.visible}
            onCancel={this.handleCancel}
            footer={null} //关闭底部按钮
            width={900}
          >
            <div>
                <DescriptionList title="" style={{ marginBottom:16 }} col={2}>
                    <Description term="订单编号">XH1231241221</Description>
                    <Description term="提货编号">TH1231241221</Description>
                    <Description term="提货状态">待确认</Description>
                    <Description term="提货类型">提货</Description>
                </DescriptionList>
                <DescriptionList title="" style={{ marginBottom: 20 }} col={1}>
                    <Description term="提货凭证" column={24}>沪A1234124</Description>
                    <Description term="提货备注">提货</Description>
                </DescriptionList>
                <Table dataSource={this.dataSource2} title={()=>'提货信息'} pagination={false} columns={this.columns2} footer={()=><div>联系人：王闯（18612312312）</div>}/>
            </div>
          </Modal>
        </div>
      );
    }
}
class OrderDetail extends React.Component{
    constructor(props){
        super(props)
        this.state={
            modalVisible:false
        }
        // 表格
        this.tableColumns={
            // 提货函
            columns: [{
                title: '提货编号',
                dataIndex: 'number',
              }, {
                title: '提货类型',
                dataIndex: 'type',
              }, {
                title: '提货凭证',
                dataIndex: 'license',
              }, {
                title: '预提件数',
                dataIndex: 'preNum',
              }, {
                title: '预提吨数',
                dataIndex: 'preWeight',
              }, {
                title: '实提件数',
                dataIndex: 'relNum',
              }, {
                title: '实提吨数',
                dataIndex: 'relWeight',
              }, {
                title: '状态',
                dataIndex: 'state',
              }, {
                title: '操作',
                dataIndex: 'action',
                width:300,
                render:(text, record) => (
                    <span>
                      <a href="javascript:;" onClick={this.showModal.bind(this)}>查看详情</a>
                      <Divider type="vertical" />
                      <a href="javascript:;" onClick={refuse}>驳回提货函</a>
                      <Divider type="vertical" />
                      <a href="javascript:;" onClick={sure}>确认提货函</a>
                    </span>
                ),
            }],
            //商品明细
            columns1: [{
                title: '品名',
                dataIndex: 'name',
              }, {
                title: '材质',
                dataIndex: 'material',
              }, {
                title: '规格',
                dataIndex: 'size',
              }, {
                title: '钢厂',
                dataIndex: 'steel',
              }, {
                title: '仓库',
                dataIndex: 'store',
              }, {
                title: '单价',
                dataIndex: 'price',
              }, {
                title: '数量',
                dataIndex: 'num',
              }, {
                title: '单件重',
                dataIndex: 'singleWeight',
                render:(text, record)=>text+'吨'
              }, {
                title: '重量',
                dataIndex: 'sumWeight',
                render:(text, record)=>text+'吨'
            }, {
                title: '商品小计金额',
                dataIndex: 'sumPrice',
                render:(text, record)=>'￥'+text
            }],
        }
    }
    // 查看详情
    showModal(){
        this.setState({
            modalVisible:true
        })
    }
    render(){
        return(
            <div className={`orderDetail`} style={{padding:'20px 0'}}>
                <ViewDetailModal modalVisible={this.state.modalVisible}/>
                <Card title="订单概览"   style={{marginBottom:10}} bordered={false} extra={<div className="btns"><Button type="primary" ghost>确认开票</Button><Button type="primary" ghost>白条支付</Button><Button>取消订单</Button></div>}>
                    <Row>
                        <Col span={8} title="订单信息">
                            <DescriptionList title="订单信息" col={8}>
                                    <Col span={8}> 
                                    <Description term="商家">XS123413234</Description>
                                    <Description term="姓名">2018-10-30 12:35:21</Description>
                                </Col>
                            </DescriptionList>
                        </Col>
                        <Col span={8}>
                            <DescriptionList  title="采购用户">
                                <Col span={8}> 
                                    <Description term="">上海达达钢贸有限公司</Description>
                                    <Description term="">王闯（18516577665）</Description>
                                </Col>
                            </DescriptionList>
                        </Col>
                        <Col  span={8}>
                            <DescriptionList  title="状态">
                                <Col span={8}> 
                                    <Description term="订单状态">待确认</Description>
                                    <Description term="总金额"><b className="red" style={{fontSize:'22px',marginRight:10,verticalAlign:'-2px'}}>¥222.00</b></Description>
                                </Col>
                            </DescriptionList>
                        </Col>
                    </Row>
                </Card>
                <Card title="提货函"  style={{marginBottom:10}} bordered={false} extra={<div className="btns"><NavLink to='/buy/order/add'><Button type="primary" ghost>新增提货申请</Button></NavLink></div>}>
                    <Table dataSource={dataSource} columns={this.tableColumns.columns} pagination ={false}/>
                </Card>                    
                <Card title="商品明细"  style={{marginBottom:10}} bordered={false}>
                    <Table dataSource={dataSource1} columns={this.tableColumns.columns1} pagination ={false} footer={() => {
                        return(
                            <div className="table-bottom">
                                <div>
                                    <b>总计</b>
                                </div>
                                <div>
                                    件数：
                                    12件
                                </div>
                                <div>
                                    吨数：
                                    12吨
                                </div>
                                <div>
                                    总价：
                                    ￥12
                                </div>
                            </div>
                        )
                    }}/>
                </Card>                    
            </div>
        )
    }
}


export default withRouter(connect()(OrderDetail));
